<template>
	<el-card class="box-card" shadow="hover" destroy-on-close style="height: 100%" body-style="height:100%; overflow:auto">
		<template #header>
			<div class="card-header">
				<div class="tree-h-flex">
					<div class="tree-h-left">
						<el-input :prefix-icon="Search" v-model="filterText" placeholder="文件类型名称" />
					</div>
					<div class="tree-h-right">
							<el-button @click="Addfiletype" style="margin-left: 8px; width: 34px" icon="ele-Plus">
							</el-button>
					</div>
					<div class="tree-h-right">
							<el-button @click="Updatefiletype" style="margin-left: 8px; width: 34px" icon="ele-Edit">
							</el-button>
					</div>
				</div>
			</div>
			<EditStyFileType @initTreeData="initTreeData"  ref="editStyFileTypeRef" :title="state.typetreetitle"/>
		</template>
		<div style="margin-bottom: 45px" v-loading="state.loading">
			<el-tree
				ref="treeRef"
				class="filter-tree"
				:data="state.fileTypeData"
				node-key="id"
				:props="{ children: 'children', label: 'name' }"
				:filter-node-method="filterNode"
				@node-click="nodeClick"
				highlight-current
				check-strictly
				accordion
				
			/>
		</div>
	</el-card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import type { ElTree } from 'element-plus';
import { ElMessage} from 'element-plus';
import { Search, MoreFilled } from '@element-plus/icons-vue';
import { getFileType,getFileTypeTree } from '/@/api/system/fileType';

import EditStyFileType from '/@/views/system/file/component/editStyFileType.vue';
import { getAPI } from '/@/utils/axios-utils';
import { SysRegionApi } from '/@/api-services/api';
import { SysRegion } from '/@/api-services/models';

const editStyFileTypeRef = ref<InstanceType<typeof EditStyFileType>>();
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const state = reactive({
	loading: false,
	fileTypeData: [] as Array<SysRegion>,
	typetreetitle:"",
	editValue:{} as any,
	addValue:{} as any,
});

onMounted(() => {
	initTreeData();
});

watch(filterText, (val) => {
	treeRef.value!.filter(val);
});

const initTreeData = async () => {
	state.loading = true;
	var res = await getFileTypeTree();
	state.fileTypeData = res.data.result ?? [];
	state.loading = false;
};

// 获取已经选择
const getCheckedKeys = () => {
	return treeRef.value!.getCheckedKeys();
};

const filterNode = (value: string, data: any) => {
	if (!value) return true;
	return data.name.includes(value);
};
const Addfiletype=()=>{
	state.typetreetitle='新增文件类型';
	state.addValue.id=undefined;
	editStyFileTypeRef.value?.openDialog(state.addValue);
};
const Updatefiletype=()=>{
	if(!state.editValue.id){
		ElMessage.error('请选择要修改的类型');
		return;
	}
	state.typetreetitle='修改文件类型';
	editStyFileTypeRef.value?.openDialog(state.editValue);
};
const handleCommand = async (command: string | number | object) => {
	if ('expandAll' == command) {
		for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
			treeRef.value!.store._getAllNodes()[i].expanded = true;
		}
	} else if ('collapseAll' == command) {
		for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
			treeRef.value!.store._getAllNodes()[i].expanded = false;
		}
	} else if ('refresh' == command) {
		initTreeData();
	} else if ('rootNode' == command) {
		emits('node-click', { id: 0, name: '' });
	}
};

// 与父组件的交互逻辑
const emits = defineEmits(['node-click']);
const nodeClick = (node: any) => {
	state.editValue=node;
	emits('node-click', { id: node.id, name: node.name });
};

// 导出对象
defineExpose({ initTreeData, getCheckedKeys });
</script>

<style lang="scss" scoped>
.tree-h-flex {
	display: flex;
}

.tree-h-left {
	flex: 1;
	width: 100%;
}

.tree-h-right {
	width: 42px;
	min-width: 42px;
}
</style>
